<!--
 描述: 环形跑道图
 作者: Jack Chen
 日期: 2020-04-29
-->

<template>
  <div class="hbh-container"> 
    <commonTitle :title="'热水设备监控'" />
    <div class="pies">
      <div class="realBox">
        <pieComponent
        :config="{
          fontSize: 20,
          insertContent: '200',
          title: '在线设备/台',
          color: '#1AC757',
          canvasId: 'hbhp',
        }"
      ></pieComponent>
      </div>
      <div class="realBox">
        <pieComponent
        :config="{
          fontSize: 20,
          insertContent: '1200',
          title: '离线设备/台',
          color: '#1DACFF',
          canvasId: 'hbhp2',
        }"
      ></pieComponent>
      </div>
      <div class="realBox">
        <pieComponent
        :config="{
          fontSize: 20,
          insertContent: '2000',
          title: '使用中/台',
          color: '#8167F5',
          canvasId: 'hbhp3',
        }"
      ></pieComponent>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "circleRunway",
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="scss" scoped>
.hbh-container {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
 .pies{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  .realBox{
    width: 30%;
    // height: 300px;
    // background-color: red;
  }
 }
}
</style>
